<template>
  <div class="mid">
    <div class="flex-wrap">
      <span class="name ellipsis">{{address.contact_name}}{{address.sex == 0 ? "先生" : "女士"}}</span>
      <span class="phone">{{address.contact_mobile}}</span>
      <span class="status" :class="statusStyle" @click="pay(address)">{{ statusFormat}}</span>
    </div>
    <div>
      <p class="address">{{addressFormat}}</p>
    </div>
  </div>
</template>

<script>
import api from '../../api'
import common from "../../api/common";
export default {
  props: ["address"],
  filters: {},
  data() {
    return {
      deposit: this.$store.state.deposit
    };
  },
  computed: {
    statusStyle() {
      if (this.address.money) {
        return "done";
      } else {
        return "wait";
      }
    },
    statusFormat() {
      if (this.address.money) {
        return `已缴纳押金`;
      } else {
        return "待缴纳押金";
      }
    },
    addressFormat() {
      return `${this.address.province_name}${this.address.city_name}${
        this.address.dist_name
      } ${this.address.street}`;
    }
  },
  methods: {
    pay(address) {
      console.log(address)
      if (!this.address.money) {
        this.$dialog
          .confirm({
            title: `提示`,
            message: `该地址购买需要缴纳${this.deposit}押金，是否缴纳`
          })
          .then(() => {
            // 点击确定
            var uid = this.$store.state.uid;
            var address_id = address.id;

            api.order.placeOrderForYa(uid, address_id, res => {
              res = JSON.parse(res);
              var timeStamp = res.timeStamp;
              var nonceStr = res.nonceStr;
              var packArr = res.package.split("=");
              var paySign = res.paySign;
              var total_fee = common.getParam("total");
              var wxpackage = packArr[1];
              var payType = 'deposit'

              //点击微信支付后，调取统一下单接口生成微信小程序支付需要的支付参数
              var params = `?timeStamp=${timeStamp}&nonceStr=${nonceStr}&package=${wxpackage}&paySign=${paySign}&payType=${payType}`;

              //定义path 与小程序的支付页面的路径相对应
              var path = "/pages/wxpay/wxpay" + params;
              //通过JSSDK的api使小程序跳转到指定的小程序页面
              wx.miniProgram.navigateTo({ url: path });
            });
          })
          .catch(() => {
            // 点击取消
          });
      }
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.mid {
  width: 80vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .name,
  .phone {
    color: #aaa;
    font-size: 3.5vw;
    margin-right: 3vw;
    width: 20vw;
    display: inline-block;
  }
  .address {
    font-size: 4vw;
    margin-top: 3vw;
  }
  .status {
    font-size: 3vw;
    padding: 0.5vw 3vw;
    border-radius: 20px;
  }
  .status.wait {
    border: 1px solid #ff6d65;
    color: #ff6d65;
  }
  .status.done {
    border: 1px solid #219df1;
    color: #219df1;
  }
  .flex-wrap {
    display: flex;
    align-items: center;
  }
}
</style>